<script setup lang="ts">
defineOptions({
 name:'UserPage'
})
import { showConfirmDialog } from 'vant';
import useTokenStore from '@/stores/token';
import { useRouter } from 'vue-router';
const router = useRouter();
const {removeToken} = useTokenStore();
const logout  = ()=>{
    showConfirmDialog({
  title: '提示',
  message:
    '确认要退出登录',
})
  .then(() => {
    removeToken()
    router.push('/login')
  })
  .catch(() => {
    // on cancel
    console.log('取消');
    
  });
}
</script>
<template>
 <div class="user-page">
  <div class="user">
   <img src="http://teachoss.itheima.net/heimaQuestionMiniapp/%E5%AE%98%E6%96%B9%E9%BB%98%E8%AE%A4%E5%A4%B4%E5%83%8F%402x.png" alt="" />
   <h3>xxxx</h3>
  </div>
  <van-grid clickable :column-num="3" :border="false">
   <van-grid-item icon="clock-o" text="历史记录" to="/" />
   <van-grid-item icon="bookmark-o" text="我的收藏" to="/collect" />
   <van-grid-item icon="thumb-circle-o" text="我的点赞" to="/like" />
  </van-grid>

  <van-cell-group class="list">
   <van-cell title="推荐分享" is-link />
   <van-cell title="意见反馈" is-link />
   <van-cell title="关于我们" is-link />
   <van-cell title="退出登录" @click="logout"/>
  </van-cell-group>
 </div>
</template>

<style lang="scss" scoped>
.user-page {
 padding: 0 10px;
 background: #f5f5f5;
 height: 100vh;

 .list {
  margin-top: 20px;
 }

 .user {
  display: flex;
  padding: 20px 0;
  align-items: center;

  img {
   width: 80px;
   height: 80px;
   border-radius: 50%;
   overflow: hidden;
  }

  h3 {
   margin: 0;
   padding-left: 20px;
   font-size: 18px;
  }
 }
}
</style>